<template>
    <a-transfer
      :data-source="dataList"
      :target-keys="targetKeys"
      :disabled="false"
      :locale="{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }"
      :show-search="true"
      :filter-option="(inputValue, item) => item[filterField].indexOf(inputValue) !== -1"
      :show-select-all="false"
      @change="onChange" v-bind="transferData.options">
      <template
        #children="{
          direction,
          filteredItems,
          selectedKeys,
          disabled: listDisabled,
          onItemSelectAll,
          onItemSelect,
        }"
      >
        <a-table
          :row-selection="
            getRowSelection({
              disabled: listDisabled,
              selectedKeys,
              onItemSelectAll,
              onItemSelect,
            })
          "
          :bordered="false"
          :scroll="{ y: 500 }"
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source="filteredItems"
          size="small"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
          :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              onClick: () => {
                if (itemDisabled || listDisabled) return;
                onItemSelect(key, !selectedKeys.includes(key));
              },
            })
          "
        />
      </template>
    </a-transfer>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import { TableColumnsInterface, TransferDataInterface } from './ITransferTableInterFace'
// import { Transfer, Table } from 'ant-design-vue'

export default defineComponent({
  props: {
    transferData: {
      type: Object as PropType<TransferDataInterface<any>>,
      required: true
    }
  },
  setup (props, ctx) {
    const targetKeys = ref<string[]>([])
    const dataList = ref<any[]>([])
    const filterField = ref<string>(props.transferData.filterField || 'title')
    const leftColumns = ref<TableColumnsInterface[]>(props.transferData.leftTableColumns)
    const rightColumns = ref<TableColumnsInterface[]>(props.transferData.rightTableColumns)
    const checkTransferDataList = () => {
      return targetKeys.value
    }
    const onChange = (nextTargetKeys: string[], direction:any) => {
      targetKeys.value = nextTargetKeys
      ctx.emit('chagneTableDataFun', targetKeys.value)
      console.log(direction)
    }
    const getRowSelection = ({
      disabled,
      selectedKeys,
      onItemSelectAll,
      onItemSelect
    }: Record<string, any>) => {
      return {
        getCheckboxProps: (item: Record<string, string | boolean>) => ({
          disabled: disabled || item.disabled
        }),
        onSelectAll (selected: boolean, selectedRows: Record<string, string | boolean>[]) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key)
          const diffKeys = selected
            ? treeSelectedKeys.filter((x) => !selectedKeys.some((item:string) => x === item))
            : selectedKeys.filter((x:string) => !treeSelectedKeys.some((item) => x === item))
          onItemSelectAll(diffKeys, selected)
        },
        onSelect ({ key }: Record<string, string>, selected: boolean) {
          onItemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys
      }
    }
    watch(props.transferData, () => {
      if (props.transferData.fileNames) {
        dataList.value = props.transferData.dataList.map(item => {
          return {
            ...item,
            title: item[props.transferData.fileNames?.title || 'title'],
            key: item[props.transferData.fileNames?.key || 'key'],
            disabled: item[props.transferData.fileNames?.disabled || 'disabled'],
            description: item[props.transferData.fileNames?.description || 'description']
          }
        })
      } else {
        dataList.value = props.transferData.dataList
      }

      targetKeys.value = props.transferData.checkList
    }, {
      deep: true
    })
    return {
      checkTransferDataList,
      dataList,
      targetKeys,
      leftColumns,
      rightColumns,
      onChange,
      filterField,
      getRowSelection
    }
  },
  components: {
    // 'a-transfer': Transfer,
    // 'a-table': Table
  }
})
</script>
